<template>
  <div class="wrapper">
    <div class="header">
      <text class="headerword">{{header}}</text>
    </div>

    <div class="nav">
      <text @click="jump('home')" :class="[selectpath=='home'?'nav-item':'nav-item-normal']">主页</text>
      <text @click="jump('recommend')" :class="[selectpath=='recommend'?'nav-item':'nav-item-normal']">推荐</text>
      <text @click="jump('qa')" :class="[selectpath=='qa'?'nav-item':'nav-item-normal']">问答</text>
    </div>
    <router-view class="template"></router-view>
  </div>
</template>

<script>
  const stream = weex.requireModule('stream');
  console.log('welcome')
  console.log(stream);
  export default {
    name: 'index',
    data:{
      header:'码学',
      selectpath:'home'
    },

    created : function(){
      var me = this;
      stream.fetch({
        method: 'GET',
        type: 'text',
        // url: 'https://api.github.com/repos/alibaba/weex'
        url: 'http://193.112.145.13/wyz'
        // url:'https://kitsu.io/api/edge/anime?filter%5Bstatus%5D=current&sort=-userCount&page%5Blimit%5D=20'
      }, function(ret) {

        if(!ret.ok){
          console.log('fail-----------')
          console.log(JSON.stringify(ret))
          // me.getResult = "request failed";

          // modal.toast({
          //   'message': "失败",
          //   'duration': 2.0
          // })
        }else{
          console.log('success------------');
          // console.log(JSON.stringify(ret))

          // me.getResult = JSON.stringify(ret);

          // modal.toast({
          //   message: JSON.stringify(ret),
          //   duration: 2.0
          // })
        }
      })
    },


    methods:{
      jump:function(e){
        switch(e){
          case 'home':
            this._data.header = '码学';
            break;
          case 'recommend':
            this._data.header = '推荐';
            break;
          case 'qa':
            this._data.header = '问答';
            break;
        }
        this.$router.push(e);
        // this.$router.push(e).catch(err => { console.log(err) });
        this._data.selectpath = e;
      }
    }
  }
</script>


<style scoped>
  .wrapper{
    width:750px;
  }

  .header{
    width:750px;
    height:80px;
    background-color: white;
    justify-content: center;
  }
  .headerword{
    height:60px;
    font-size: 60px;
    border-bottom: 1px solid black;
    align-items: center;
    text-align: center;
  }
  .nav{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 750px;
    height: 90px;
    position: fixed;
    bottom: 0px;
    z-index: 99;
    background-color: white;
  }
  .nav-item{
    width: 250px;
    line-height: 80px;
    height: 80px;
    color: blue;
    text-align: center;
    font-size: 40px;
  }

  .nav-item-normal{
    width: 250px;
    line-height: 80px;
    height: 80px;
    color: black;
    text-align: center;
    font-size: 40px;
  }
</style>
